<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">搜索</block>
		</cu-custom>
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @focus="InputFocus" @blur="InputBlur" @input="handleInput" :adjust-position="false" type="text"
					placeholder="输入关键词进行搜索" confirm-type="search" v-model="keywords" />
			</view>
			<view class="action">
				<button class="cu-btn bg-green shadow-blur round" @click="handleClickSearch">搜索</button>
			</view>
		</view>
		<view class="cu-list menu">
			<view class="cu-item" v-for="(item, index) in tips" :key="index" @click="handleTipClick(item)">
				<view class="content">
					<text class="text-grey text-sm">{{item}}</text>
				</view>
			</view>
		</view>

		<view class="cu-card case no-card margin-tb-sm" @click="toImageDetails(item.id)"
			v-for="(item, index) in imagesPageInfo.records" :key="index">
			<view class="cu-item shadow">
				<view class="image">
					<image :src="item.url" mode="aspectFill" class="main-image"></image>
					<view class="cu-bar bg-shadeBottom">
						<text class="text-cut" v-html="item.title"></text>
					</view>
				</view>
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar round lg" :style="'background-image:url(' + item.creator.avatar + ');'">
						</view>
						<view class="content flex-sub">
							<view class="text-grey">{{ item.creator.nickname }}</view>
							<view class="text-gray text-sm flex justify-between">
								{{ item.createTime }}
								<view class="text-gray text-sm">
									<text class="cuIcon-attentionfill margin-lr-xs"></text>
									{{ item.views }}
									<text class="cuIcon-appreciatefill margin-lr-xs"></text>
									{{ item.likes }}
									<text class="cuIcon-messagefill margin-lr-xs"></text>
									{{ item.comments }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="padding text-center text-gray" v-show="showNoMore">没有更多内容了哦......</view>
	</view>
</template>

<script>
	import {
		fetchImagesByKeywordsApi,
		getKeywordsByPrefixApi
	} from '../../api/http';
	export default {
		data() {
			return {
				keywords: "",
				showNoMore: false,
				imagesPageInfo: {
					current: 1,
					size: 5,
					records: [],
					total: 0
				},
				tips: []
			};
		},
		onReachBottom() {
			if (this.imagesPageInfo.current * this.imagesPageInfo.size >= this.imagesPageInfo.total) {
				this.showNoMore = true;
				return;
			}
			this.fetchImages({
				page: this.imagesPageInfo.current + 1,
				limit: this.imagesPageInfo.size,
				keywords: this.keywords
			});
		},
		methods: {
			InputFocus(e) {
				console.log(e);
			},
			InputBlur(e) {
				console.log(e);
			},
			handleInput(e) {
				const prefix = e.detail.value;
				if (prefix && prefix !== '') {
					getKeywordsByPrefixApi(prefix).then(res => {
						this.tips = res.data;
					})
				} else {
					this.tips = [];
				}
			},
			handleTipClick(words) {
				this.keywords = words;
			},
			fetchImages(param) {
				fetchImagesByKeywordsApi(param).then(res => {
					const _info = res.data;
					this.imagesPageInfo.current = _info.current;
					this.imagesPageInfo.size = _info.size;
					this.imagesPageInfo.records = this.imagesPageInfo.records.concat(_info.records);
					this.imagesPageInfo.total = _info.total;
				});
			},
			handleClickSearch() {
				if (this.keywords === '') {
					uni.showToast({
						title: "请输入关键词",
						icon: "none"
					})
					return;
				}
				this.imagesPageInfo.records = [];
				this.fetchImages({
					page: 1,
					limit: this.imagesPageInfo.size,
					keywords: this.keywords
				});
				this.tips = [];
			},
			toImageDetails(id) {
				uni.navigateTo({
					url: '../image_details/image_details?id=' + id
				});
			}
		}
	}
</script>

<style lang="scss">

</style>
